<template>
  <div class="death-book">
    <div class="death-book__inner">
      <div class="death-book__title">
        <el-image class="death-book__img" width="100%" height="100%"
          :src="require(`@/assets/images/deathCertificateLeftImg.svg`)" fit="contain" />
        <span>{{ fileName }}</span>
        <el-image class="death-book__img" width="100%" height="100%"
          :src="require(`@/assets/images/deathCertificateRightImg.svg`)" fit="contain" />
      </div>
      <div class="death-book__number">
        <span class="text-label">编号：</span>
        <span class="text-content">{{ info.cardNo | getText }}</span>
      </div>
      <div class="death-book__row">
        <div class="death-book__row-item">
          <span class="text-label">死者姓名</span>
          <span class="text-content" style="width: 328px;">{{ info.name | getText }}</span>
        </div>
        <div class="death-book__row-item">
          <span class="text-label">性别</span>
          <span class="text-content" style="width: 92px;">{{ genderMap[info.gender] | getText }}</span>
        </div>
        <div class="death-book__row-item">
          <span class="text-label">年龄</span>
          <span class="text-content" style="width: 92px;">{{ info.age | getText }}</span>
        </div>
        <div class="death-book__row-item">
          <span class="text-label">国家或地区</span>
          <span class="text-content" style="width: 194px;">{{ countryMap[info.country] | getText }}</span>
        </div>
      </div>
      <div class="death-book__row">
        <div class="death-book__row-item">
          <span class="text-label">民族</span>
          <span class="text-content" style="width: 224px;">{{ nationMap[info.nation] | getText }}</span>
        </div>
        <div class="death-book__row-item">
          <span class="text-label">有效身份证件类别</span>
          <span class="text-content" style="width: 158px;">{{ idcardTypeMap[info.idcardType] | getText }}</span>
        </div>
        <div class="death-book__row-item">
          <span class="text-label">证件号码</span>
          <span class="text-content" style="width: 328px;">{{ info.idcardCode | getText }}</span>
        </div>
      </div>
      <div class="death-book__row">
        <div class="death-book__row-item">
          <span class="text-label">常住地址</span>
          <span class="text-content" style="width: 425px;">{{ info.obodeDetail | getText }}</span>
        </div>
        <div class="death-book__row-item">
          <span class="text-label">户籍地址</span>
          <span class="text-content" style="width: 425px;">{{ info.domicileDetail | getText }}</span>
        </div>
      </div>
      <div class="death-book__row">
        <div class="death-book__row-item">
          <span class="text-label">出生日期</span>
          <span class="text-content" style="width: 92px;">{{ birthDateObj.year | getText }}</span>
          <span class="text-label">年</span>
          <span class="text-content" style="width: 92px;">{{ birthDateObj.month | getText }}</span>
          <span class="text-label">月</span>
          <span class="text-content" style="width: 92px;">{{ birthDateObj.date | getText }}</span>
          <span class="text-label">日</span>
        </div>
        <div class="death-book__row-item">
          <span class="text-label">死亡日期</span>
          <span class="text-content" style="width: 92px;">{{ deathDateObj.year | getText }}</span>
          <span class="text-label">年</span>
          <span class="text-content" style="width: 92px;">{{ deathDateObj.month | getText }}</span>
          <span class="text-label">月</span>
          <span class="text-content" style="width: 92px;">{{ deathDateObj.date | getText }}</span>
          <span class="text-label">日</span>
        </div>
      </div>
      <div class="death-book__row">
        <div class="death-book__row-item">
          <span class="text-label">死亡原因</span>
          <span class="text-content" style="width: 328px;">{{ info.causeA | getText }}</span>
        </div>
        <div class="death-book__row-item">
          <span class="text-label">死亡地点类别</span>
          <span class="text-content" style="width: 484px;">{{ deathplaceCodeMap[info.deathplaceCode] | getText }}</span>
        </div>
      </div>
      <div class="death-book__row">
        <div class="death-book__table">
          <div class="death-book__table-thead">
            <div class="death-book__table-thead-item text-label">家属姓名</div>
            <div class="death-book__table-thead-item text-label">联系电话</div>
            <div class="death-book__table-thead-item text-label">家属地址或单位</div>
            <div class="death-book__table-thead-item text-label">有效身份类别</div>
            <div class="death-book__table-thead-item text-label">证件号码</div>
          </div>
          <div class="death-book__table-tbody">
            <div class="death-book__table-thead-item text-content">{{ info.guardianName | getText }}</div>
            <div class="death-book__table-thead-item text-content">{{ info.guardianTel | getText }}</div>
            <div class="death-book__table-thead-item text-content">{{ info.guardianAddress | getText }}</div>
            <div class="death-book__table-thead-item text-content">{{ guardianIdcardTypeMap[info.guardianIdcardType] |
              getText }}</div>
            <div class="death-book__table-thead-item text-content">{{ info.guardianIdcardCode | getText }}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getExactType } from '@/utils';
import { countryMap, deathplaceCodeMap, genderMap, guardianIdcardTypeMap, idcardTypeMap, nationMap } from '@/utils/enum';

export default {
  name: 'DeathCard',
  props: {
    info: {
      type: Object,
      default: () => { }
    },
  },
  model: {
    prop: "info",
    event: "input",
  },
  filters: {
    getText(value) {
      let type = getExactType(value);
      return ['null', 'undefined'].includes(type) ? '-' : value;
    },
  },
  computed: {
    birthDateObj() {
      let map = {};
      this.info.birthDate && (map = this.info.birthDate.split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      return map;
    },
    deathDateObj() {
      let map = {};
      let _map = {};
      this.info.deathDate && (map = this.info.deathDate.split(' ')[0].split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      this.info.deathDate && (_map = this.info.deathDate.split(' ')[1].split(':').reduce((acc, cur, index) => {
        acc[['hour', 'minute', 'second'][index]] = cur
        return acc
      }, {}))

      return { ...map, ..._map };
    },
  },
  data() {
    return {
      genderMap,
      idcardTypeMap,
      nationMap,
      countryMap,
      guardianIdcardTypeMap,
      deathplaceCodeMap,
      fileName: '居民死亡医学证明（推断）书',
    };
  },

}
</script>

<style lang="scss" scoped>
.death-book {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1188px;
  height: 826px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  padding: 34px;
  position: relative;

  &__table {
    border: 2px solid #262626;
    margin-top: 16px;

    &-thead {
      border-bottom: 1px solid #262626;
      height: 62px;
      line-height: 62px;
    }

    width: 100%;

    &-thead,
    &-tbody {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 66px;
      line-height: 66px;

      .text-content::before {
        display: none;
      }

      &-item {
        flex: 1;
        text-align: center !important;

        &:not(:last-child) {
          border-right: 1px solid #262626;
        }
      }
    }
  }

  .text-label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 20px;
    color: #262626;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .text-content {
    font-family: SimSun, SimSun;
    font-weight: 400;
    font-size: 28px;
    color: #262626;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  &__inner {
    background-color: #F1F5FE;
    width: 100%;
    height: 100%;
    padding: 0 42px;
    background-image: url("../../assets/images/deathCertificateBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  &__title {
    text-align: center;
    margin-top: 100px;
    font-family: STZhongsong, STZhongsong;
    font-weight: 400;
    font-size: 42px;
    color: #2F5E9A;
    font-style: normal;
    text-transform: none;

    span {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        height: 1px;
        background: #262626;
        left: 10px;
        right: 10px;
        bottom: -4px;
      }
    }
  }

  &__img {
    width: 46px;
    height: 79px;
    position: relative;
    top: 20px;
  }

  &__number {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    margin-top: 37px;


    .text-content {
      background: #D8E7F9;
      width: 365px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }



  &__row {
    margin-top: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .text-content {
      font-size: 14px;
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;

      &::before {
        content: '';
        position: absolute;
        height: 1px;
        background: #262626;
        left: 0;
        right: 0;
        bottom: -6px;
      }
    }
  }
}
</style>
